<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天猫登录页</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="./base.css" type="text/css" /> -->
    <style>
      body,
      ul,
      ol,
      li {
        margin: 0;
        padding: 0;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
      }
      ul,
      ol {
        list-style: none;
      }
      .content {
        width: 100%;
        position: relative;
      }
      .login-bg {
        background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);
        height: 700px;
        position: absolute;
        z-index: 9;
        top: 0;
        left: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50%;
        width: 100%;
      }
      .content-layout {
        width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;

        z-index: 999;
      }
      .content1Title {
        text-align: center;
        position: relative;
        top: 60px;
        line-height: 60px;
        font-size: 36px;
        font-weight: 600;
        opacity: 1;
        -webkit-transform: translate(0px, 30px);
        transform: translate(0px, 30px);
      }
      .content2-contentWrapper {
        position: absolute;
        top: 109px;
        width: 1240px;
        height: 450px;
        display: flex;
      }
      .content2-contentWrapper li {
        font-size: 0;
        float: left;
        /* display: inline-block; */
        width: 25%;
        height: 100%;
        vertical-align: top;
        opacity: 0;
        -webkit-transform: translate(0px, 100px);
        transform: translate(0px, 100px);
      }
      .content2-contentWrapper li.animated0 {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: all 0.3s ease-in 0s;
        transition: all 0.3s ease-in 0s;
      }
      .content2-contentWrapper li.animated1 {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: all 0.3s ease-in 0.1s;
        transition: all 0.3s ease-in 0.1s;
      }
      .content2-contentWrapper li.animated2 {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: all 0.3s ease-in 0.2s;
        transition: all 0.3s ease-in 0.2s;
      }
      .content2-contentWrapper li.animated3 {
        opacity: 1;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: all 0.3s ease-in 0.3s;
        transition: all 0.3s ease-in 0.3s;
      }
      .icon img {
        display: block;
        width: 164px;
        height: 164px;
        margin: 98px auto 0;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="login-bg"></div>
      <div class="content-layout" style="height: 700px"></div>
      <div id="content-center" class="content-layout" style="height: 552px">
        <h1 class="content1Title animatedOut" id="selfBoxTitle">自驾导航</h1>
        <ul class="content2-contentWrapper">
          <li id="selfBoxBlock0">
            <div class="icon">
              <img
                src="https://mobile.amap.com/static/content1Img4.9a248ab6.png"
                width="100%"
              />
            </div>
            <div class="text">
              <h3>实时动态路况</h3>
              <p>前方拥堵车祸早知道</p>
            </div>
          </li>
          <li id="selfBoxBlock1">
            <div class="icon">
              <img
                src="https://mobile.amap.com/static/content1Img4.9a248ab6.png"
                width="100%"
              />
            </div>
            <div class="text">
              <h3>全程优选路线</h3>
              <p>第一时间找到最优路线</p>
            </div>
          </li>
          <li id="selfBoxBlock2">
            <div class="icon">
              <img
                src="https://mobile.amap.com/static/content1Img2.8c69d6ca.png"
                width="100%"
              />
            </div>
            <div class="text">
              <h3>180W+电子眼</h3>
              <p>地图数据专业告别违章</p>
            </div>
          </li>
          <li id="selfBoxBlock3">
            <div class="icon">
              <img
                src="https://mobile.amap.com/static/content1Img3.3f300b0a.png"
                width="100%"
              />
            </div>
            <div class="text">
              <h3>明星语音导航</h3>
              <p>全程快乐导航</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script>
    function showDiv() {
      var showId = document.getElementById("content-center");
      var selfBoxBlock0 = document.getElementById("selfBoxBlock0");
      var selfBoxBlock1 = document.getElementById("selfBoxBlock1");
      var selfBoxBlock2 = document.getElementById("selfBoxBlock2");
      var selfBoxBlock3 = document.getElementById("selfBoxBlock3");
      var clients =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      var divTop = showId.getBoundingClientRect().top;
      console.log(divTop, clients);
      if (divTop <= 550) {
        selfBoxBlock0.classList.add("animated0");
        selfBoxBlock1.classList.add("animated1");
        selfBoxBlock2.classList.add("animated2");
        selfBoxBlock3.classList.add("animated3");
      }
    }
    $(function () {
      // var Height = $(window).height(); //窗口高度
      // console.log('可视高度：' + Height);
      // $('.main').find('*').each(function() {
      //     var Top = $(this).offset().top;
      //     if(Top - Height <= 0) {
      //         $(this).addClass('none').css({
      //             'background': '#09f',
      //             'opacity': 1
      //         });
      //     }
      // });
      $(window).scroll(function () {
        showDiv();
      });
    });
  </script>
</html>
